
class Captcha {
  //是否拖拽
  static drag = false
  //图片真实角度
  static rotate = ''
  //元素的拖拽角度
  static degRotate = ''
  //提取元素translate的正则
  ///.*\([^\)\(\d]*(\d+)[^\)\(\d]*\).*/g
  static brackReg = /translateX\((.*?)\)/
  //抖动的偏移量
  static number = 1
  //鼠标抬起时对页面元素行为的封装
  static documentHandle(mask, err, sliding_block, mouseX, documentUp) {
    switch (documentUp) {
      case 'location':
        Captcha.locationDocumentHandler(mask, err, sliding_block, mouseX, documentUp)
        break
      case 'translateX':
        Captcha.translateXDocumentHandle(mask, err, sliding_block, documentUp)

        break;
      case 'noTranslateX':
        Captcha.translateXDocumentHandle(mask, err, sliding_block, documentUp)
        break;
      default:
        throw new Error('遇到未匹配到的抬起行为')
    }

  }
  //定时器
  static setTimeoutHandle(mask, err, sliding_block, documentUp, mouseX) {
    setTimeout(() => {
      switch (documentUp) {
        case 'location':
          sliding_block.style.transform = `translateX(${mouseX}px)`
          sliding_block.style.removeProperty('transform')
          sliding_block.style.backgroundColor = '#fff'
          break;
        case 'translateX':
          mask.classList.remove('mask_hide')
          err.classList.remove('err_hide')
          sliding_block.style.removeProperty('transform')
          sliding_block.style.backgroundColor = '#fff'
          break;
        case 'noTranslateX':
          mask.classList.remove('mask_hide')
          err.classList.remove('err_hide')
          sliding_block.style.removeProperty('transform')
          sliding_block.style.backgroundColor = '#fff'
          break;
        default:
          throw new Error('遇到未匹配到的抬起行为')
      }
    }, 500);


  };
  //页面跳转时的处理
  static locationDocumentHandler(mask, err, sliding_block, documentUp, mouseX) {
    mask.classList.remove('mask_hide')
    err.classList.remove('err_hide')
    sliding_block.style.backgroundColor = this.moveing
    //
    Captcha.setTimeoutHandle(mask, err, sliding_block, mouseX, documentUp)

  }
  //取消样式
  static translateXDocumentHandle(mask, err, sliding_block, documentUp) {
    mask.classList.add('mask_hide')
    err.classList.add('err_hide')
    Captcha.setTimeoutHandle(mask, err, sliding_block, documentUp)
  }
  //鼠标移动时对页面元素行为的封装
  static documentMoveing(sliding_block, rotate_img, mouseX, documentMove, movend, event) {
    switch (documentMove) {
      case 'lesslegitimate':
        mouseX = 0
        sliding_block.style.transform = `translateX(${mouseX}px)`
        break
      case 'legitimate':
        sliding_block.style.backgroundColor = this.moveing
        //拖拽的角度
        let deg = Math.ceil((mouseX - 1) * 1.706)
        mouseX = event.clientX - sliding_block.offsetLeft - 40
        rotate_img.style.transform = `rotate(${deg}deg)`
        sliding_block.style.transform = `translateX(${mouseX}px)`
        Captcha.degRotate = deg
        break
      case 'morelegitimate':
        mouseX = 212
        sliding_block.style.backgroundColor = movend
        document.onmousemove = null
        sliding_block.style.transform = `translateX(${mouseX}px)`

        break
      default:
        throw new Error('遇到未匹配的移动行为')

    }

  }
  //未移动元素时对页面的处理
  static judgeDocument(translateX, sliding_block) {
    try {
      translateX = sliding_block.style.transform
      translateX = translateX.match(Captcha.brackReg)[1].split('px')[0]
      return translateX
    } catch (error) {
      if (error) {
        throw new Error('请移动滑块')
      }
    }
  }
  constructor(url, options) {

    //图片的地址
    this.imgurl = options.imgurl
    //按钮结束时的颜色
    this.movend = options ? options.moved : 'red'
    //开始时的颜色
    this.startMove = options ? options.startMove : '#fff'
    //按钮移动时的颜色
    this.moveing = options ? options.moveing : 'skyblue'

    this.url = url
    //获取页面的元素
    this.sliding_block = document.querySelector('.sliding_block')
    this.sliding = document.querySelector('.sliding')
    this.rotate_img = document.querySelector('.rotate_img')
    this.err = document.querySelector('.err')
    this.mask = document.querySelector('.mask')
    Captcha.imgRotate(this.imgurl, this.rotate_img)
    Captcha.documentMove(this.sliding_block, this.rotate_img, this.movend, this.mask, this.err, this.url, this.moveing, this.imgurl)
  }

  //更换图片
  static imgRotate(imgurl, rotate_img) {
    axios.get(imgurl).then((res) => {
      let { data } = res
      console.log(res)
      if (res.data.code === 200) {
        //后台传入的图片只要加入随机数就能实现图片的刷新
        rotate_img.src = data.data.imgurl
        Captcha.rotate = data.data.rotate
      }

    })
  }
  //验证图片的角度
  static imgVerify() {
    return new Promise((resolve, reject) => {
      if (Captcha.rotate !== '') {
        if (355 <= (Captcha.rotate + Captcha.degRotate) && (Captcha.rotate + Captcha.degRotate) <= 368) {
          resolve({
            suited: true
          })
        } else {
          resolve({
            suited: false
          })
        }
      }
    })
  }
  // //滑动防抖
  static debounce(callBack, timer, time, sliding_block, rotate_img, mouseX, documentMove, movend, event) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      callBack(sliding_block, rotate_img, mouseX, documentMove, movend, event)
    }, time);

  }
  static documentMoveHandler(sliding_block, rotate_img, mouseX, documentMove, movend, event) {
    if (Captcha.drag) {
      mouseX = event.clientX - sliding_block.offsetLeft - 40
      if (mouseX <= 0) {
        documentMove = 'lesslegitimate'
        Captcha.documentMoveing(sliding_block, rotate_img, mouseX, documentMove, movend, event)
      } else if (0 < mouseX && mouseX <= 212) {
        documentMove = 'legitimate'
        Captcha.documentMoveing(sliding_block, rotate_img, mouseX, documentMove, movend, event)
      } else if (mouseX > 213) {
        documentMove = 'morelegitimate'
        Captcha.documentMoveing(sliding_block, rotate_img, mouseX, documentMove, movend, event)
      }
    }
  }


  static documentMove(sliding_block, rotate_img, movend, mask, err, url, moveing, imgurl) {
    //鼠标的位置
    let mouseX;
    //鼠标的偏移量
    let translateX;
    //鼠标移动行为
    let documentMove;
    //鼠标抬起行为
    let documentUp
    sliding_block.onmousedown = (event) => {
      Captcha.drag = true
      if (event.target.classList[0] === 'p_img' || event.target.classList[0] === 'sliding_block') {
        sliding_block.style.backgroundColor = moveing
        document.onmousemove = (event) => {
          let timer;
          return Captcha.debounce(Captcha.documentMoveHandler, timer, 50, sliding_block, rotate_img, mouseX, documentMove, movend, event)
        }
      } else {
        mouseX = 0
        Captcha.drag = false
      }
    }
    document.onmouseup = (event) => {
      sliding_block.onmousemove = null
      document.onmousemove = null
      Captcha.drag = false
      translateX = Captcha.judgeDocument(translateX, sliding_block)
      if (translateX !== '0' && translateX) {
        Captcha.imgVerify().then((res) => {
          if (res.suited) {
            //页面跳转
            documentUp = 'location'
            mouseX = translateX
            Captcha.documentHandle(mask, err, sliding_block, mouseX, documentUp)
            err.classList.add('succ')
            setTimeout(() => {
              err.classList.remove('succ')
              window.location = url
            }, 500);
          } else {
            //重新请求
            rotate_img.style.removeProperty('transform')
            Captcha.imgRotate(imgurl, rotate_img)
          }
        })
        documentUp = 'translateX'
        Captcha.documentHandle(mask, err, sliding_block, mouseX, documentUp)
      } else {
        if (event.target.classList[0] === 'sliding_block' || event.target.classList[0] === 'p_img') {
          documentUp = 'noTranslateX'
          Captcha.documentHandle(mask, err, sliding_block, mouseX, documentUp)
        }
      }
    }
  }
}
